<template>
  <section class="component running-record-summary">
    <data-form :model="model" :page="pageService" @onSearch="refreshData" hiddenReset>
      <template slot="inputs">
        <el-form-item label="运行时间" prop="strategyCaseType">
          <el-date-picker end-placeholder="结束时间" range-separator="-" start-placeholder="开始时间" type="datetimerange" v-model="model.runningTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column :formatter="row => $filter.dateTimeFormat(row.runningTime)" :min-width="$helper.getColumnWidth(6)" label="运行时间" prop="runningTime"></el-table-column>
        <el-table-column :formatter="row => $filter.dictConvert(row.runningType,'RunningType')" :min-width="$helper.getColumnWidth(3)" label="运行类型" prop="runningType"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="案件总数" prop="sumCaseNum"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="命中数" prop="hitNumber"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="操作">
          <template slot-scope="scope">
            <el-button @click="checkDetailsClick(scope)" type="text">查看明细</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialog.RunRecordOfTheDaydialog" append-to-body title="队列运行明细" width="1000px" @open="$nextTick(() => $refs['run-record-of-the-day'].refreshData())">
      <run-record-of-the-day :batchNumber="batchNumber" :labelId="labelId" @close="dialog.RunRecordOfTheDaydialog=false" ref="run-record-of-the-day"></run-record-of-the-day>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import { Dependencies } from "~/core/decorator";
import {
  Vue,
  Component,
  Prop,
  Emit,
  Model,
  Watch
} from "vue-property-decorator";
import { Form } from "element-ui";
import { namespace } from "vuex-class";
import { ValidatorService } from "~/utils/validator.service";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { LabelingStrategyService } from "~/services/dataimp-service/labeling-strategy-service";
import RunRecordOfTheDay from "~/components/labeling-strategy/run-record-of-the-day.vue";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    RunRecordOfTheDay
  }
})
export default class RunningRecordSummary extends Vue {
  @CollectionExecutionModule.State private executionId;
  @Dependencies(LabelingStrategyService)
  private labelingStrategyService: LabelingStrategyService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;

  @Prop({
    type: String
  })
  private id: string;

  private model: any = {
    runningTime: [],
    id: ""
  };
  private batchNumber: any = "";
  private labelId: any = "";
  private dialog: any = {
    RunRecordOfTheDaydialog: false
  };
  private dataSet: any = [];

  @Watch("id")
  private onIdChange(val) {
    // if (val) this.refreshData();
  }

  private mounted() {
    // this.refreshData();
  }

  private checkDetailsClick(scope) {
    this.batchNumber = scope.row.batchNumber;
    this.labelId = scope.row.labelId;
    this.dialog.RunRecordOfTheDaydialog = true;
  }

  private refreshData() {
    this.model.id = this.id;
    this.labelingStrategyService
      .queryLabelDetailAll(this.model, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }
}
</script>

<style lang="less" scoped>
</style>
